<template>
    <a-drawer
        :maskClosable="false"
        :title="`修改【${currentKey}】字段`"
        placement="bottom"
        :closable="false"
        :open="visible"
        @close="cancelUpdate"
    >
        <template #extra>
            <a-button style="margin-right: 8px" @click="cancelUpdate">取消</a-button>
            <a-button type="primary" @click="confirmUpdate">更新</a-button>
        </template>
        <a-textarea
            @input="inputChange"
            v-model:value="currentValue"
            placeholder="Autosize height based on content lines"
            auto-size
        />
    </a-drawer>
</template>
<script lang="ts" setup>
    import { useVModel } from "@vueuse/core";

    const props = defineProps<{
        visible: boolean;
    }>();
    const emit = defineEmits(["update:visible", "cancel", "ok", "input-change"]);
    const visible = useVModel(props, "visible", emit);

    const currentKey = inject("currentKey") as Ref<string>;
    const currentValue = inject("currentValue") as Ref<string>;
    // 初始化值 比如用户取消更新 则给复原值
    // 确定更新
    const confirmUpdate = () => {
        emit("ok");
    };
    const cancelUpdate = () => {
        emit("cancel", true);
    };
    const inputChange = () => {
        emit("input-change");
    };
</script>
